<template>
	<view class="content">
		<!-- <RobotData></RobotData> -->
		<view class="logo-area">
			<img src="../../static/logo.png"></img>
		</view>
		<view class="title-area">
			<img src="../../static/title.png"></img>
		</view>
		<view class="login-btn">
			<view class="login-dialog">
				<view class="form-content">
					<block>
						<view class="form-title">手机号</view>
						<view class="pr"
							style="display: flex; justify-content: flex-start; background-color: #F9F9F9; border-radius: 25px; padding-left: 30rpx;">
							<select v-model="areaCode" class="form-select">
								<option value='86'>+86</option>
							</select>
							<input type="number" maxlength="11" name="accounts" class="form-item diy"
								@input="form_input_mobile_event" />
						</view>
						<view class="form-title">验证码</view>
						<view class="code pr m-b-xl">
							<input type="number" name="verify" maxlength="4" @input="form_input_mobile_code_event" />
							<button
								:class="'verify-submit pa br text-size-sm cr-grey-9 ' + (verify_disabled ? 'sub-disabled' : '')"
								type="default" hover-class="none" size="mini" :disabled="verify_disabled"
								@tap="verify_send_event">{{ verify_submit_text }}</button>
						</view>
						<view class="submit-box">
							<img src="../../static/login-btn.png" class="submit-login" @tap="handleLogin"></img>
						</view>
					</block>
				</view>
			</view>
		</view>

		<view class="error_dialog" v-if="loginError" @tap="loginError = false">
			<img src="../../static/yzsb.png"></img>
		</view>
		<FootLogo></FootLogo>
	</view>
</template>

<script>
	// import RobotData from '@/components/robot/robot.vue';
	import FootLogo from '@/components/footLogo/index.vue';
	export default {
		components: {
			// RobotData,
			FootLogo
		},
		data() {
			return {
				verify_submit_text: '获取验证码',
				verify_disabled: false,
				form_input_mobile_value: '',
				form_input_mobile_code: '',
				verify_time_total: 60,
				showLogin: false,
				loginError: false,
				areaCode: '86',
				isTargetTime: false,

			}
		},
		onLoad(props) {
			const now = new Date();
			const targetDate = new Date(2024, 10, 6); //月份是从0开始的，10表示11月
			if (now.getTime() >= targetDate.getTime()) {
				this.isTargetTime = true
			} else {
				this.isTargetTime = false
			}
			if (props.isAdmin) {
				this.isTargetTime = props.isAdmin == 1 ? true : false
			}
		},
		methods: {


			handleBM() {
				window.location.href = 'https://apigo.baidu.com/d/fpObgH09'
			},
			// 输入手机号码事件
			form_input_mobile_event(e) {
				this.form_input_mobile_value = e.detail.value
			},
			// 输入验证码
			form_input_mobile_code_event(e) {
				this.form_input_mobile_code = e.detail.value
			},
			// 短信验证码发送事件
			verify_send_event() {
				if ((this.form_input_mobile_value || null) == null) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'error'
					})
					return false;
				}
				this.verify_send_handle()
			},
			// 短信验证码发送处理
			verify_send_handle() {
				// 网络请求
				var self = this;
				uni.showLoading({
					title: '请求中',
				});
				this.verify_disabled = true
				uni.request({
					url: 'https://flow.btvs.cn/api/basic/sms/sendSms',
					method: 'POST',
					data: {
						phoneNumber: this.form_input_mobile_value,
						areaCode: this.areaCode
					},
					dataType: 'json',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							// 倒计时处理
							var temp_time = this.verify_time_total;
							this.temp_clear_time = setInterval(function() {
								if (temp_time <= 1) {
									clearInterval(self.temp_clear_time);
									self.verify_submit_text = '获取验证码'
									self.verify_disabled = false
								} else {
									temp_time--;
									self.verify_submit_text = '剩余' + temp_time + '秒'
								}
							}, 1000);
						} else {
							this.verify_submit_text = '获取验证码'
							this.verify_disabled = false
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							});
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.verify_submit_text = '获取验证码'
						this.verify_disabled = false
						uni.showToast({
							title: res.msg || '网络开小差了哦',
							icon: 'error'
						});
					},
				});
			},
			handleLogin() {
				// 网络请求
				uni.showLoading({
					title: '请求中',
				});
				if ((this.form_input_mobile_value || null) == null) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'error'
					})
					return false;
				}
				if (this.form_input_mobile_code == '') {
					uni.showToast({
						title: '请输入正确的验证码',
						icon: 'error'
					})
					return false;
				}
				uni.request({
					url: 'https://flow.btvs.cn/api/auth/guestLogin',
					method: 'POST',
					data: {
						phoneNumber: this.form_input_mobile_value,
						code: this.form_input_mobile_code
					},
					dataType: 'json',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 200) {
							uni.setStorageSync('token', res.data.data.access_token);
							uni.navigateTo({
								url: '/pages/qd/qd'
							})

						} else if (res.data.code == 5001 || res.data.code == 5002) {
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							})
						} else {
							this.loginError = true
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络开小差了哦',
							icon: "error"
						})
					},
				});
			}
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		background: url('../../static/index_bg.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.logo-area {

			position: absolute;
			top: 40px;
			left: 40px;
			z-index: 9;

			img {
				width: 260rpx;
				display: block;
			}
		}

		.title-area {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				margin-top: -660rpx;
				width: 90%;
				display: block;
			}
		}
	}

	.login-btn {
		width: 100%;
		position: absolute;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;

		img {
			width: 300rpx;
			display: block;
		}

		.mb-15px {
			margin-bottom: 15px;
		}

		.bqxx {
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
		}
	}

	.login-dialog {

		.submit-box {
			margin-top: 72rpx;
			text-align: center;

			.submit-login {
				width: 320rpx;
				margin: 0 auto;
			}
		}

		.form-title {
			margin-top: 16px;
			margin-bottom: 8px;
			padding-left: 34rpx;
			font-size: 14px;
			font-weight: 600;
			text-align: left;
			color: #fff;
		}

		.form-content {
			width: 80%;
			padding: 34rpx;
			margin: 0 auto;
			margin-bottom: 80rpx;
		}

		.form-content .form-item,
		.form-content .code,
		.form-content .verify {
			height: 50px;
			line-height: 50px;
			background: #F9F9F9;
			border-radius: 25px;
			border: 0;
		}



		.form-content .code input,
		.form-content .verify input {
			height: 50px;
			line-height: 50px;
			padding: 0 36rpx;
		}



		.form-content .form-item ::v-deep .input-placeholder,
		.form-content .form-item ::v-deep .uni-input-input {
			padding: 0 36rpx;
			font-size: 30rpx;
			text-align: left;
		}

		.form-content .form-item ::v-deep .input-placeholder,
		.form-content .code input ::v-deep .input-placeholder,
		.form-content .verify input ::v-deep .input-placeholder {
			font-size: 30rpx;
		}

		.form-content .code input,
		.form-content .verify input {
			width: 63%;
			text-align: left;
		}

		.form-content .form-item ::v-deep .uni-input-input:-webkit-autofill {
			/* //这个地方的颜色是字体颜色，可以根据实际情况修改 */
			/* -webkit-text-fill-color: #ededed !important;  */
			/* //设置input输入框的背景颜色为透明色 */
			-webkit-box-shadow: 0 0 0px 1000px #f9f9f9 inset !important;
			/* //设置input输入框的背景颜色为透明色 */
			background-color: #f9f9f9;
			background-image: none;
			transition: background-color 50000s ease-in-out 0s;
		}

		.form-content .code ::v-deep .uni-input-input:-webkit-autofill {
			/* //设置input输入框的背景颜色为透明色 */
			background-color: #f9f9f9;
			background-image: none;
			transition: background-color 50000s ease-in-out 0s;
		}

		.form-content .code .verify-submit {
			padding: 0 12px;
			height: 28px;
			line-height: 28px;
			top: 11px;
			right: 36rpx;
		}

		.form-content .verify-submit:after {
			border: none;
		}

		.opt-type-list text:not(:last-child) {
			margin-right: 50rpx;
		}


	}

	.form-select {
		height: 50px;
		line-height: 50px;
		padding: 0;
		border: none;
		background: transparent;
		color: #111;
		font-size: 30rpx;
		margin-right: 10rpx;
	}

	.error_dialog {
		padding-top: 30%;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		background-image: url('../../static/login_bg.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;

		img {
			width: 640rpx;
		}
	}


	.m-b-xl {
		margin-bottom: 18px;
	}

	.pa {
		position: absolute;
	}

	.pr {
		position: relative;
	}

	.br {
		border: none !important;
	}

	.cr-grey,
	.cr-grey-9 {
		color: #999 !important;
	}

	.text-size-sm {
		font-size: 13px !important;
	}

	.form-content .diy ::v-deep .uni-input-input {
		padding-left: 0 !important;
	}
</style>